<template>
  <div class="customerEchart-box">
    <div class="customerEchart-box-top">
      <div class="btn">
        <el-radio-group
          v-model="radio"
          @change="dasSel"
        >
          <el-radio-button label="昨天" />
          <el-radio-button label="最近7天" />
          <el-radio-button label="最近30天" />
        </el-radio-group>
      </div>
      <div class="block">
        <el-date-picker
          v-model="value"
          style="max-width:238px"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :unlink-panels="false"
          @change="selTime"
          @blur="loseTime"
        />
      </div>
      <!-- <div
        class="exportBtn"
        @click="exportBtn"
      >导出数据</div> -->
    </div>
    <div class="customerEchart-box-bot">
      <div
        ref="_chart"
        class="echar"
      />
    </div>
  </div>
</template>

<script>
import { getRangeNum } from '@/api/statistics.js'
import { recentDate } from '@/utils/util.js'
export default {
  data() {
    return {
      radio: '昨天',
      value: '',
      disOption: {
        xAxis: {
          type: 'category',
          data: [
            '0~50元',
            '51~100元',
            '101~200元',
            '201~500元',
            '501~1000元',
            '1001~5000元',
            '5001~10000元',
            '10000元以上'
          ],
          axisTick: {
            show: false
          },
          nameGap: 30,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#F2F2F2'
            }
          },
          nameTextStyle: {
            color: '#000'
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          nameGap: 30,
          axisLine: {
            lineStyle: {
              color: '#F2F2F2'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#F2F2F2'
            }
          }
        },
        series: [
          {
            data: [],
            type: 'bar',
            itemStyle: {
              color: '#1BE4FC',
              barBorderRadius: [4, 4, 0, 0]
            },
            barMaxWidth: 17
          }
        ],
        label: {
          show: true,
          position: 'top',
          color: '#333333'
        },
        textStyle: {
          color: '#333333'
        }
      },
      myChart: null
    }
  },
  created() {
    this.getData(recentDate(2), recentDate(1))
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs._chart)
      this.myChart.setOption({ ...this.disOption })
    },
    // 获取数据
    getData(startM, endM) {
      getRangeNum({
        startTime: startM,
        endTime: endM
      }).then(res => {
        console.log(res)
        if (!res.data[0]) {
          this.disOption.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0]
        } else {
          this.disOption.series[0].data = []
          for (const k in res.data[0]) {
            this.disOption.series[0].data.push(~~res.data[0][k])
          }
        }
        this.init()
      })
    },
    // 选择时间
    dasSel() {
      if (this.radio === '最近7天') {
        this.getData(recentDate(8), recentDate(1))
      } else if (this.radio === '最近30天') {
        this.getData(recentDate(31), recentDate(1))
      } else {
        this.getData(recentDate(2), recentDate(1))
      }
    },
    // 输入时间
    selTime() {
      if (this.value) {
        this.getData(this.value[0], this.value[1])
      } else {
        this.getData(recentDate(2), recentDate(1))
      }
    },
    loseTime() {
      this.getData(recentDate(2), recentDate(1))
    },
    // 导出数据
    exportBtn() {}
  }
}
</script>
